<template>
  <div class="app-container">
    <!-- 头部搜索框 -->
    <div class="filter-container">
      <section class="sectin01" style="width: '300px'">
        <el-tag type="primary" style="margin-right: 10px; font-size: 16px"
          >申请时间</el-tag
        >
        <el-date-picker
          v-model="value7"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="time02()"
        ></el-date-picker>
      </section>
      <section class="sectin01">
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
      </section>
    </div>
    <!-- 内容 -->
    <div class="content">
      <el-row :gutter="12">
        <el-col :span="16">
          <el-tag style="margin: 5px">
            <span>未收款 </span>
            <span style="margin-left: 20px"> 数量 :</span>
            <span style="font-weight: bold; color: red"
              >&nbsp;{{ count_ip }} </span
            >个
            <span style="margin-left: 20px"> 金额 :</span>
            <span style="font-weight: bold; color: red"
              >&nbsp;{{ money_ip }}
            </span>
          </el-tag>
          <el-table
            :key="tableKey"
            v-loading="listLoading01"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.6)"
            :data="cardConfig.todayApplyDetailList || [{}]"
            max-height="700"
            border
            fit
            highlight-current-row
            show-summary
            style="width: 100%"
            :row-class-name="tableRowClassName"
            :default-sort="{ prop: 'pl_apply_time', order: 'descending' }"
          >
            <el-table-column
              type="index"
              label="序号"
              prop="id"
              width="40"
            ></el-table-column>
            <el-table-column label="订单类型" align="center" min-width="50">
              <template slot-scope="{ row }">
                <span>{{ row.apply_type == 2 ? "平台申请" : "个人申请" }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="服务数量"
              min-width="50"
              align="center"
              prop="amount"
            >
              <template slot-scope="{ row }">
                <span>{{ row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="备注信息"
              min-width="80"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="申请时间"
              min-width="60"
              prop="pl_apply_time"
              sortable
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.pl_apply_time }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="实际收款金额"
              min-width="50"
              class-name="end_times"
              align="center"
              prop="gold"
            >
              <template slot-scope="{ row }">
                <span>{{ row.gold }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="收款状态"
              min-width="50"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.is_receipt }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="IP购买状态"
              min-width="50"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.is_buy_ip }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column
          label="微信IP购买状态"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.is_buy_wxip }}</span>
          </template>
        </el-table-column> -->
            <el-table-column
              label="交付状态"
              min-width="50"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.is_offer }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              min-width="50"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <!-- <section v-if="scope.row.is_receipt == '未收款'">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="applyRec(scope.$index, scope.row)"
                    >已收款</el-button
                  >
                </section> -->
                <section v-if="scope.row.is_buy_ip == '未购买'">
                  <el-button
                    :disabled="change_rote('addIProle_card')"
                    type="primary"
                    size="mini"
                    @click="
                      handrenew(
                        scope.$index,
                        cardConfig.todayApplyDetailList[scope.$index].id,
                        scope.row
                      )
                    "
                    >购买服务</el-button
                  >
                </section>
                <!-- <section v-else-if=" scope.row.is_buy_wxip == '未购买'">
              <el-button
                type="primary"
                size="mini"
                @click="
                  handleModifyStatus(
                    scope.$index,
                    cardConfig.todayApplyDetailList[scope.$index].id,
                    scope.row
                  )
                "
                >购买微信IP</el-button
              >
              
            </section> -->
                <section v-else-if="scope.row.is_offer == '未交付'">
                  <el-button
                    :disabled="change_rote('addIProle_card')"
                    size="mini"
                    type="primary"
                    @click="handleDelete(scope.$index, scope.row)"
                    >已交付</el-button
                  >
                </section>
                <section v-else>
                  <span>-</span>
                </section>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <div class="right">
            <div class="head">
              <!-- <el-button
                plain
                style="margin-left: 5px; margin-bottom: 5px"
                type="primary"
                size="mini"
                @click="addIP_card()"
                >添加IP</el-button
              > -->

              <el-tag style="margin: 5px">
                <span>今日购买服务器 </span>
                <span style="margin-left: 20px"> 总计 :</span>
                <span style="font-weight: bold; color: red"
                  >&nbsp;{{
                    (cardConfig.ipList_temp.total_amount || 0) +
                    (cardConfig.wx_ipList_temp.total_amount || 0)
                  }} </span
                >个
                <span style="margin-left: 20px"> 服务IP :</span>
                <span style="font-weight: bold; color: red"
                  >&nbsp;{{ cardConfig.ipList_temp.total_amount || 0 }} </span
                >个
              </el-tag>
            </div>
            <div class="center">
              <div class="left">
                <el-table
                  :key="tableKey"
                  v-loading="listLoading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.6)"
                  :data="cardConfig.ipList_temp.ipList || [{}]"
                  max-height="700"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%"
                  :row-class-name="tableRowClassName"
                  :default-sort="{ order: 'ascending' }"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    prop="id"
                    width="40"
                  ></el-table-column>
                  <el-table-column label="IP类型" min-width="50" align="center">
                    <template slot-scope>
                      <span>{{ cardConfig.ipList_temp.type }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="IP" min-width="50" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.ip }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="新增时间"
                    prop="add_time"
                    sortable
                    min-width="50px"
                    class-name="warn_time"
                    align="center"
                  >
                    <template slot-scope="{ row }">
                      <span>{{
                        row.add_time | masDateFormat("yyyy-mm-dd")
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="到期时间"
                    prop="end_time"
                    sortable
                    min-width="50px"
                    class-name="warn_time"
                    align="center"
                  >
                    <template slot-scope="{ row }">
                      <span>{{
                        row.end_time | masDateFormat("yyyy-mm-dd")
                      }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- <div class="right">
            <el-button
              plain
              style="margin-left: 10px; margin-bottom: 5px"
              type="primary"
              size="mini"
              @click="addIP_card(1)"
              >添加微信IP</el-button
            >
            <el-table
              :key="tableKey"
              v-loading="listLoading"
              :data="cardConfig.wx_ipList_temp.ipList || [{}]"
              height="450"
              border
              fit
              highlight-current-row
              style="width: 100%"
              @sort-change="sortChange"
              :row-class-name="tableRowClassName"
              :default-sort="{ order: 'ascending' }"
            >
              <el-table-column
                type="index"
                label="序号"
                prop="id"
                width="40"
              ></el-table-column>
              <el-table-column label="IP类型" min-width="50" align="center">
                <template>
                  <span>{{ cardConfig.wx_ipList_temp.type }}</span>
                </template>
              </el-table-column>
              <el-table-column label="IP" min-width="50" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.ip }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="新增时间"
                prop="add_time"
                sortable
                min-width="100px"
                class-name="warn_time"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.add_time | masDateFormat("yyyy-mm-dd") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="到期时间"
                prop="end_time"
                sortable
                min-width="100px"
                class-name="warn_time"
                align="center"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.end_time | masDateFormat("yyyy-mm-dd") }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div> -->
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 分业 -->

      <!-- 左部表格 -->
    </div>

    <!-- 添加IP弹框 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @close="closeDialog()"
      class="addserve"
    >
      <el-form
        ref="dataForm"
        :rules="rules01"
        :model="cardConfig.temp"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <h2
          v-if="wx_addIp"
          style="text-align: center; padding-bottom: 20px; letter-spacing: 15px"
        >
          添加微信IP
        </h2>
        <h2
          v-else
          style="text-align: center; padding-bottom: 20px; letter-spacing: 15px"
        >
          添加IP
        </h2>
        <el-form-item label="IP地址" prop="ip">
          <el-input v-model="cardConfig.temp.ip" :disabled="show_ip" />
        </el-form-item>

        <el-form-item label="上次续费时间" prop="add_time">
          <el-date-picker
            v-model="cardConfig.temp.add_time"
            type="datetime"
            placeholder="上次续费时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="到期时间" prop="end_time">
          <el-date-picker
            v-model="cardConfig.temp.end_time"
            type="datetime"
            placeholder="到期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="leave_ip()">离开</el-button>
        <el-button type="primary" @click="createData()">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table
        :data="pvData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false"
          >Confirm</el-button
        >
      </span>
    </el-dialog>
    <!-- 购买微信IP对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <p class="deletes">是否购买微信IP</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clear_ip()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 购买IP对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="renewDialogVisible"
      width="30%"
      center
    >
      <p class="deletes">是否购买服务</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="renewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="renew_ip()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//引入vuex
import { mapState } from "vuex"
import {
  addIps,
  getIpList,
  delIpInfo,
  getupdateIpInfo,
  updateIpInfo,
  //新加的
  AddBankPayIp_card,
  AddBankPayWxIp_card,
  getIpAmount_card,
  getWxipAmount_card,
  todayApplyDetail_card,
  buyIp_card,
  buyWxIp_card,
  offerIp_card,
  applyReceive_card,
} from "@/api/table"
import waves from "@/directive/waves"
import Pagination from "@/components/Pagination"
import ipadmin from "@/store/modules/ipadmin"

export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    filterLongTime(status = "") {
      var str = status
      str = str.replace(/\d{2}:\d{2}:\d{2}/g, "")
      return str
    },
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      }
      return statusMap[status]
    },
    masDateFormat: function (msg = "", pattern = "") {
      var mt = new Date(msg)
      var y = mt.getFullYear()
      var m = (mt.getMonth() + 1).toString().padStart(2, "0")
      var d = mt.getDate()
      if (pattern == "yyyy-mm-dd") {
        return y + "-" + m + "-" + d
      }
      return y + "-" + m + "-" + d
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    },
  },
  computed: {
    ...mapState(["ipadmin"]),
    ...mapState(["cardConfig"]),
  },
  data() {
    //IP校验规则
    var checkIP = (rule, value, callback) => {
      var IP =
        "^((25[0-5]|2[0-4]\\d|[1]{1}\\d{1}\\d{1}|[1-9]{1}\\d{1}|\\d{1})($|(?!\\.$)\\.)){4}$"
      var patt1 = new RegExp(IP)
      if (!value) {
        return callback(new Error("IP地址不能为空"))
      }
      setTimeout(() => {
        if (!patt1.test(value)) {
          callback(new Error("请输入正确的IP地址"))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      value7: [""],
      centerDialogVisible: false,
      renewDialogVisible: false,
      show_ip: false,
      currentPage4: 1,
      value1: "",
      tableKey: 0,
      list: null,
      total: 0,
      count_ip: 0,
      money_ip: 0,
      listLoading01: false,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        time: undefined,
        ip: undefined,
        status: undefined,
        sort: "+id",
      },
      importanceOptions: [1, 2, 3],
      //   calendarTypeOptions,
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" },
      ],
      statusOptions: ["published", "draft", "deleted"],
      showReviewer: false,
      temp: {
        ip: "",
        dueTime: "",
        lastTime: "",
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create",
      },
      dialogPvVisible: false,
      pvData: [],
      rules01: {
        ip: [{ required: true, message: "IP地址不能为空", trigger: "blur" }],
        end_time: [
          { required: true, message: "到期时间不能为空", trigger: "blur" },
        ],
        add_time: [
          { required: true, message: "续费时间不能为空", trigger: "blur" },
        ],
      },
      downloadLoading: false,
      wx_addIp: false,
      btn_role: JSON.parse(localStorage.btn),
    }
  },
  mounted() {

  },
  created() {
    // this.getList();
    this.getTime01()
    this.getIpAmount_card() //获取添加IP列表
    // this.getWxipAmount_card(); //获取添加微信IP列表
    this.todayApplyDetail_card_sync() //获取当日详情
  },
  methods: {
    change_rote(e) {
      var list = this.btn_role
      if (list.find((i) => i.name == e)) {
        return false
      } else {
        return true
      }
    },
    getTime01() {
      this.value7 = [this.get_time()[0], this.get_time()[1]]
    },
    get_time() {
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1
      let yy =
        new Date().getFullYear() < 10
          ? "0" + new Date().getFullYear()
          : new Date().getFullYear()
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate()
      let hh = new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds()
      var value = yy + "-" + mm + "-" + dd
      var value01 = yy + "-" + mm + "-" + dd
      return [value, value01]
    },

    todayApplyDetail_card() {
      this.listLoading01 = true
      todayApplyDetail_card({
        start_time: this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 ",
        end_time: this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 ",
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          })
          this.listLoading01 = false
          this.$store.commit("todayApplyDetailList_card", res.data)
          this.count_ip = res.count
          this.money_ip = res.money
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          })
        }
      })
    },
    todayApplyDetail_card_sync() {
      this.listLoading01 = true
      todayApplyDetail_card({
        start_time: this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 ",
        end_time: this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 ",
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.listLoading01 = false
        this.$store.commit("todayApplyDetailList_card", res.data)
        this.count_ip = res.count
        this.money_ip = res.money
      })
    },
    clear_ip() {
      this.centerDialogVisible = false
      buyWxIp_card({
        id: this.$store.state.cardConfig.todayApplyDetailList_id,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          })
          this.todayApplyDetail_card_sync() //获取当日详情
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          })
        }
      })
    },
    renew_ip() {
      this.renewDialogVisible = false
      buyIp_card({
        id: this.$store.state.cardConfig.todayApplyDetailList_id,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          })
          this.todayApplyDetail_card_sync() //获取当日详情
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          })
        }
      })
    },
    leave_ip() {
      this.dialogFormVisible = false
      this.show_ip = false
      this.$store.commit("cleartemp_card")
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.show_ip = false
      this.$store.commit("cleartemp_card")
    },
    time02() {
      console.log(this.value7)
      if (this.value7) {
        this.$store.commit("serchTime_card", this.value7)
      } else {
        this.$store.commit("serchTime_card", ["", ""])
      }
    },
    handleFilter() {
      // this.getList();
      this.todayApplyDetail_card()
      this.getIpAmount_card()
      // this.
    },
    handleModifyStatus(row, status, rows) {
      this.centerDialogVisible = true
      this.$store.commit("renewStatus_card", rows.id)
    },
    handrenew(row, status, rows) {
      // console.log(row,status);
      this.renewDialogVisible = true
      this.$store.commit("renewStatus_card", rows.id)
    },

    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        status: "published",
        type: "",
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate()
      })
      // this.getList();
    },
    createData() {
      if (this.wx_addIp) {
        var add_time = new Date(this.$store.state.cardConfig.temp.add_time)
        var end_time = new Date(this.$store.state.cardConfig.temp.end_time)
        if (add_time <= end_time) {
          this.$refs["dataForm"].validate((valid) => {
            if (valid) {
              AddBankPayWxIp_card({
                ...this.$store.state.cardConfig.temp,
                pid:
                  localStorage.getItem("id") ||
                  this.$store.state.cardConfig.sort_id,
              }).then((res) => {
                if (res.status == 0) {
                  this.$message({
                    message: "添加微信IP成功",
                    type: "success",
                  })

                  this.$store.commit("cleartemp_card")
                  this.dialogFormVisible = false
                  this.wx_addIp = false
                  this.getWxipAmount_card() //获取添加IP列表
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  })
                }
              })
            }
          })
        } else {
          this.$message({
            message: "上次续费时间不能大于到期时间",
            type: "warning",
          })
          this.$refs["dataForm"].validate((valid) => {})
        }
      } else {
        var add_time = new Date(this.$store.state.cardConfig.temp.add_time)
        var end_time = new Date(this.$store.state.cardConfig.temp.end_time)
        if (add_time <= end_time) {
          this.$refs["dataForm"].validate((valid) => {
            if (valid) {
              AddBankPayIp_card({
                ...this.$store.state.cardConfig.temp,
                pid:
                  localStorage.getItem("id") ||
                  this.$store.state.cardConfig.sort_id,
              }).then((res) => {
                if (res.status == 0) {
                  this.$message({
                    message: "添加IP成功",
                    type: "success",
                  })

                  this.$store.commit("cleartemp_card")
                  this.dialogFormVisible = false
                  this.wx_addIp = false
                  this.getIpAmount_card() //获取添加IP列表
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  })
                }
              })
            }
          })
        } else {
          this.$message({
            message: "上次续费时间不能大于到期时间",
            type: "warning",
          })
          this.$refs["dataForm"].validate((valid) => {
            // this.$store.commit("cleartemp_card")
            // this.dialogFormVisible = false
          })
        }
      }
    },
    handleDelete(row, rows) {
      this.$confirm("确认该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          offerIp_card({
            id: rows.id,
            pid:
              localStorage.getItem("id") ||
              this.$store.state.cardConfig.sort_id,
          }).then((res) => {
            // this.getData_card();
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              })
              this.todayApplyDetail_card_sync() //获取当日详情
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },
    applyRec(row, rows) {
      this.$prompt("请输入金额?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(({ value }) => {
          applyReceive_card({
            gold: value,
            id: rows.id,
            pid:
              localStorage.getItem("id") ||
              this.$store.state.cardConfig.sort_id,
          }).then((res) => {
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              })
              this.todayApplyDetail_card() //获取当日详情
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row"
      } else {
        return "success-row"
      }
    },
    addIP_card(e) {
      if (e) {
        this.wx_addIp = true
      }
      this.$store.commit("getAddtime_Endtime_card")
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate()
      })
    },
    getIpAmount_card() {
      this.listLoading = true
      getIpAmount_card({
        start_time: this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 ",
        end_time: this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 ",
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.listLoading = false
        this.$store.commit("getIpAmount_card", res.data)
      })
    },
    getWxipAmount_card() {
      getWxipAmount_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        console.log(res.data)
        this.$store.commit("getWxipAmount_card", res.data)
      })
    },
  },
}
</script>
<style lang='less' scoped>
.content {
  overflow: hidden;
}
/deep/.el-table td {
  padding: 6px 0px;
}
.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  margin-top: 5px;
}
.addserve {
  /deep/.el-input {
    width: 80%;
    text-align: center;
    font-weight: bold;
    color: red;
  }
}

.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.outtime {
  color: #f56c6c;
}

/deep/.el-table .red_ip {
  color: #f56c6c !important;
}
.tables {
  background-color: pink;
  height: 80%;
}

.app-container {
  padding-left: 10px;
  padding-top: 10px;
}

/deep/.el-dialog__body p {
  text-align: center;
}
</style>